<template>
  <div class="vx-nodata">
    <div v-show="list && list.length > 0">
      <slot></slot>
    </div>
    <div class="list-no-data" v-show="(!list || list.length == 0) && listTouched">
      <p>{{ subTitle }}</p>
      <img src="@/assets/image/common/noData.svg" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'vx-nodata',
  data() {
    return {
      listTouched: false, // 记录list是否已经不是初始化时的list的了
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    subTitle: {
      type: String,
      default: '暂无数据，请先点击查询',
    },
  },
  watch: {
    list() {
      this.listTouched = true;
    },
  },
};
</script>

<style lang="scss">
.vx-nodata {
  .list-no-data {
    padding: 30px;
    text-align: center;
    color: #848bad;
  }
}
</style>
